<template>
  <div>
    <!-- 创建批量删除按钮 -->
    <div class="formTop">
      <el-form
        :model="findLog"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="日志id" prop="logId">
          <el-input v-model="findLog.logId"></el-input>
        </el-form-item>
        <el-form-item label="登录的ip" prop="visitorip">
          <el-input v-model="findLog.visitorip"></el-input> </el-form-item
        ><el-form-item label="拜访类别" prop="visitclass">
          <el-input v-model="findLog.visitclass"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" plain @click="search()">开始查询</el-button>
          <el-button type="success" plain @click="batch1()">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 创建一个展示日志信息的表格 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="loglist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="logId" label="日志id" width="150">
        </el-table-column>
        <el-table-column prop="visitorip" label="登录的ip" width="120">
        </el-table-column>
        <el-table-column prop="visitortime" label="拜访时间" width="120">
        </el-table-column>
        <el-table-column prop="visitclass" label="拜访类别" width="120">
        </el-table-column>
        <el-table-column prop="visitormethod" label="使用方法" width="120">
        </el-table-column>
        <el-table-column prop="other" label="其他" width="120">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openModal(scope.row)"
              >更新</el-button
            >
            <el-button type="text" size="small" @click="batch(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <!-- 存放按钮  -->
      </div>
    </div>
    <!-- 更新数据 -->
    <div>
      <el-dialog
        title="更新学生信息"
        :visible.sync="isModalOpen"
        width="30%"
        @close="closeModal"
      >
        <el-form
          :model="updateLog"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          v-if="isModalOpen"
        >
          <el-form-item label="日志id" prop="logId">
            <el-input v-model="updateLog.logId"></el-input>
          </el-form-item>
          <el-form-item label="登录的ip" prop="visitorip">
            <el-input v-model="updateLog.visitorip"></el-input>
          </el-form-item>
          <el-form-item label="拜访时间" prop="visitortime">
            <el-input v-model="updateLog.visitortime"></el-input>
          </el-form-item>
          <el-form-item label="拜访类别" prop="visitclass">
            <el-input v-model="updateLog.visitclass"></el-input>
          </el-form-item>
          <el-form-item label="使用方法" prop="visitormethod">
            <el-input v-model="updateLog.visitormethod"></el-input>
          </el-form-item>
          <el-form-item label="其他" prop="other">
            <el-input v-model="updateLog.other"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="certainModal">提交</el-button>
            <el-button @click="closeModal">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getLogs,
  deleteLog,
  deleteBatchLog,
  updateLog,
  findLogById,
  findLogmh,
} from "@/api/day";
export default {
  name: "day",
  data() {
    return {
      loglist: [],
      multipleSelection: [],
      isModalOpen: false,
      updateLog: {
        logId: "",
        visitorip: "",
        visitortime: "",
        visitclass: "",
        visitormethod: "",
        other: "",
      },
      findLog: {
        logId: "",
        visitorip: "",
        visitclass: "",
      },
    };
  },
  created() {
    this.getDate(); //回调函数
  },
  methods: {
    getDate() {
      getLogs().then((res) => {
        this.loglist = res.data;
      });
    },
    handleSelectionChange(val) {
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection[i] = val[i].logId;
      }
      console.log(this.multipleSelection);
    },
    batch(row) {
      alert(11);
      console.log(row);
      deleteLog(row.logId).then(() => {
        this.getDate();
      });
    },
    openModal(row) {
      console.log(row);
      this.isModalOpen = true;
      findLogById(row.logId).then((res) => {
        alert(1);
        this.updateLog = res.data;
        console.log(res.data);
      });
    },
    closeModal() {
      this.isModalOpen = false;
    },
    // 提交更新表
    certainModal() {
      updateLog(this.updateLog).then((res) => {
        this.isModalOpen = false;
        this.getDate();
      });
    },
    batch1() {
      deleteBatchLog(this.multipleSelection).then((res) => {
        this.getDate();
      });
    },
    // 模糊查询
    search() {
      console.log(this.findLog);
      findLogmh(this.findLog).then((res) => {
        this.loglist = res.data;
      });
    },
  },
};
</script>

<style>
</style>